<template>
  <view class="pageHeight wh_750 bg_F5F5F5 flex align-center flex-column">
    <s-header-title title="添加目录"
                    is-fixed
                    background="#FFFFFF"
                    is-display-back
                    @getPageHeight="getPageHeight"
    ></s-header-title>
    <view :style="{height:`${page.pageHeight}px`}"></view>
    <view class="flex align-center justify-center hW_100"
          v-for="(item,index) in page.list"
          :key="index"
    >
      <view class="wh_702 bg_FFFFFF hW_80 flex align-center justify-between"
            style="border-radius: 8rpx"

      >
        <view class="ml_22 fs_30 color_4B4B4B fw_500">{{ item.title }}</view>
        <view class="mr_22 fs_24 color_4B4B4B fw_500" @click.stop="debounce(addCatalogue(item),1500,true)">
          添加
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app';
  import { reactive, computed } from 'vue';
  import sheep from '@/sheep';
  import debounce from '@/sheep/helper/debounce';

  const page = reactive({
    options: {},
    pageHeight: 0,
    list: [],
  });

  onLoad(async (options) => {
    page.options = options;
    const { data } = await sheep.$api.book_list.getDefaultCate();
    console.log(data);
    page.list = data;
  });

  function getPageHeight(height) {
    page.pageHeight = height;
  }

  async function addCatalogue(item) {
    const { code, msg } = await sheep.$api.book_list.addCate({
      genealogy_id: page.options.id,
      sys_id: item.id,
      title: item.title,
    });
    if (code == 1) {
      sheep.$helper.toast('添加成功');
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    } else {
      sheep.$helper.toast(msg);
    }
  }
</script>

<style lang="scss">

</style>
